<!doctype html>
<html lang="zh-CN" xmlns:th="http://www.thymeleaf.org">

	<head>
		<meta charset="utf-8">
		<meta name="renderer" content="webkit">
		<meta http-equiv="X-UA-Compatible" content="IE=edge">
		<meta name="viewport" content="width=device-width, initial-scale=1">
		<title>交流中</title>
		<meta name="keywords" content="">
		<meta name="description" content="">
		<meta name="keywords" content="">
		<meta name="description" content="">
		<link rel="stylesheet" type="text/css" th:href="@{/chat/css/bootstrap.min.css}">
		<link rel="stylesheet" type="text/css" th:href="@{/chat/css/nprogress.css}">
		<link rel="stylesheet" type="text/css" th:href="@{/chat/css/style.css}">
		<link rel="stylesheet" type="text/css" th:href="@{/chat/css/font-awesome.min.css}">
		<link rel="apple-touch-icon-precomposed" th:href="@{/chat/images/icon.png}">
		<link rel="shortcut icon" th:href="@{/chat/images/favicon.ico}">
		<script th:src="@{/chat/js/jquery-2.1.4.min.js}"></script>
		<script th:src="@{/chat/js/nprogress.js}"></script>
		<script th:src="@{/chat/js/jquery.lazyload.min.js}"></script>
		<!--[if gte IE 9]>
		<script th:src="@{/chat/js/jquery-1.11.1.min.js}" type="text/javascript"></script>
		<script th:src="@{/chat/js/html5shiv.min.js}" type="text/javascript"></script>
		<script th:src="@{/chat/js/respond.min.js}" type="text/javascript"></script>
		<script th:src="@{/chat/js/selectivizr-min.js}" type="text/javascript"></script>
		<![endif]-->
		<!--[if lt IE 9]>
		<script>window.location.href='upgrade-browser.html';</script>
<![endif]-->
		<script th:inline="javascript">

            $(document).ready(function(){
                $("#quxiaobtn").click(function(){
                    $("#text").val('');
                });

            });



            <!-- 聊天js -->
            var webSocket;
            var username = [[${username}]]
            function send_msg() {
                if (webSocket != null) {
                    var input_msg = document.getElementById("input_msg").value.trim();
                    if (input_msg == "") {
                        return;
                    }
                    webSocket.send(input_msg+';'+username);
                    // 清除input框里的信息
                    document.getElementById("input_msg").value = "";
                } else {
                    alert("您已掉线，请重新进入聊天室...");
                }
            };

            function closeWs() {
                webSocket.close();
            };

            function initWebSocket() {
                var roomName = document.getElementById("input_roomName").value;
                // 房间名不能为空
                if (roomName == null || roomName == "") {
                    alert("请输入房间名");
                    return;
                }
                if ("WebSocket" in window) {
//            alert("您的浏览器支持 WebSocket!");
                    if (webSocket == null) {
                        var url = "ws://localhost:9000/edu/webSocket/chat/" + roomName;
                        // 打开一个 web socket
                        webSocket = new WebSocket(url);
                    } else {
                        alert("您已进入聊天室...");
                    }

                    webSocket.onopen = function () {
                        alert("已进入聊天室，畅聊吧...");
                    };

                    webSocket.onmessage = function (evt) {
                        var msg_board = document.getElementsByClassName("msg_board")[0];
                        var received_msg = evt.data;
                        var old_msg = msg_board.innerHTML;
                        msg_board.innerHTML  = old_msg + received_msg ;
                        // 让滚动块往下移动
                        msg_board.scrollTop = msg_board.scrollHeight;
                    };

                    webSocket.onclose = function () {
                        // 关闭 websocket，清空信息板
                        alert("连接已关闭...");
                        webSocket = null;
                        document.getElementsByClassName("msg_board")[0].innerHTML = "";
                    };
                }
                else {
                    // 浏览器不支持 WebSocket
                    alert("您的浏览器不支持 WebSocket!");
                }
            }
		</script>

	<body class="user-select single">
	<header class="header">
		<nav class="navbar navbar-default" id="navbar">
			<div class="container">
				<div class="navbar-header">
					<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#header-navbar" aria-expanded="false"> <span class="sr-only"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> </button>
					<h1 class="logo hvr-bounce-in"><a href="#" title="木庄网络博客"><img th:src="@{/chat/images/201610171329086541.png}" alt="木庄网络博客"></a></h1>
				</div>
				<div class="collapse navbar-collapse" id="header-navbar">
					<form class="navbar-form visible-xs" action="/Search" method="post">
						<div class="input-group">
							<input type="text" name="keyword" class="form-control" placeholder="请输入关键字" maxlength="20" autocomplete="off">
							<span class="input-group-btn">
		<button class="btn btn-default btn-search" name="search" type="submit">搜索</button>
		</span> </div>
					</form>
					<ul class="nav navbar-nav navbar-right">
						<li>
							<a data-cont="首页" title="首页" th:href="@{/chathome}">首页</a>
						</li>
						<li>
							<a data-cont="全部chat" title="全部chat" th:href="@{/list}">全部chat</a>
						</li>
						<li>
							<a data-cont="我要发布" title="我要发布" th:href="@{/createchat}">我要发布</a>
						</li>
						<li>
							<a data-cont="我要写作" title="我要写作" th:href="@{/chatlist}">我要写作</a>
						</li>
						<li>
							<a data-cont="我的订购" title="我的订购" th:href="@{/chatreservelist}">我的订购</a>
						</li>
						<li>
							<a data-cont="我的交流" title="我的交流" th:href="@{/chateassylist}">我的交流</a>
						</li>
						<li>
							<a href="javascript:;">小明</a>
						</li>
					</ul>
				</div>
			</div>
		</nav>
	</header>
		<section class="container" style="width: 100%;">
			<div class="content-wrap" style="width: 100%;">
				<div class="content" style="width: 100%;">
					<header class="article-header" style="width: 100%;">
						<h1 class="article-title"><a  th:text="${essay.essayname}" title="用DTcms做一个独立博客网站（响应式模板）" >用DTcms做一个独立博客网站（响应式模板）</a></h1>
						<div class="article-meta"> <span class="item article-meta-time">
	  						<time class="time" data-toggle="tooltip" data-placement="bottom" title="" data-original-title="发表时间：2016-10-14" th:text="${#dates.format(essay.createtime, 'yyyy-MM-dd hh:mm:ss')}"><i class="glyphicon glyphicon-time"></i> 2016-10-14</time>
	  						</span>
						</div>
					</header>
					<article class="article-content" style="width: 100%;">
						<div>
							<h3 th:utext="${essay.essaycontent}"></h3>
						</div>
					</article>
					<hr style="height:1px;border:none;border-top:1px solid #dcdedd;" />
					<article class="article-content" style="width: 100%;">
					<div id="zhongjian">
						<div class="wrapper wrapper-content animated fadeInRight">
							<div class="row">
								<div class="col-sm-12">
									<div class="ibox chat-view ">
										<div class="ibox-content col-lg-12">
											<div class="row">
												<div class="col-md-12 ">
													<div id="msg_board" class="chat-discussion msg_board">
													</div>
												</div>
											</div>
											<div class="row">
												<div class="col-sm-12">
													<div class="chat-message-form">
														<form>
														<div class="form-group">

															<input id="input_roomName" style="width: 10em" type="hidden"  placeholder="房间号" th:value="${essay.chatid}">
															<input class="btn btn-default" type="button" value="进入聊天室" onclick="initWebSocket()">
															<input class="btn btn-default" type="button" value="退出聊天室" onclick="closeWs()">

															<textarea id="input_msg" rows="5" cols="7" class="form-control message-input" name="message" placeholder="输入消息内容"></textarea>

															<div class="buttongroup" style="float: right;">

																<input id="quxiaobtn" type="reset" class="btn btn-default" value="取消" />
																&nbsp;&nbsp;
																<input id="btn"  type="button" onclick="send_msg()" class="btn btn-default" value="确定" />
															</div>
														</div>
														</form>
													</div>
												</div>
											</div>
										</div>
									</div>
								</div>
							</div>
						</div>
					</div>
					</article>
				</div>
					</div>
				</div>
			</div>
		</section>
	<footer class="footer">
		<div class="container">
			<p>Copyright &copy; 2016.Company name All rights reserved.More Templates <a href="http://www.cssmoban.com/" target="_blank" title="模板之家">模板之家</a> - Collect from <a href="http://www.cssmoban.com/" title="网页模板" target="_blank">网页模板</a> </p>
		</div>
		<div id="gotop"><a class="gotop"></a></div>
	</footer>
	<script src="chat/js/bootstrap.min.js"></script>
	<script src="chat/js/jquery.ias.js"></script>
	<script src="chat/js/scripts.js"></script>
	</head>
	</body>

</html>